<script setup>
import { onMounted, ref } from 'vue'

import { useTableList } from '@/hooks/useTableList'
import {
  fetchStorageDeviceList,
  deleteStorageDevice,
} from '@/api/manager/dataManage/deviceManage.js'
import StorageAdd from './storageAdd.vue'
import StorageDetail from './storageDetail.vue'
// import VideoLiveDialog from '../../videoLive.vue'
import VideoPlaybakDialog from './videoPlaybak.vue'

defineOptions({
  name: 'StorageDevice',
})

const props = defineProps({
  currentType: {
    type: String,
    default: '',
  },
  parkList: {
    type: Array,
    default: [],
  },
})

const searchParams = ref({
  keywords: '',
})

const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  handleDelete,
  searchFromRef,
} = useTableList(searchParams, fetchStorageDeviceList, deleteStorageDevice)

const videoLiveRef = ref()

const handleAddDialogClose = (shouldRefresh) => {
  handleClose(shouldRefresh)
}

const handleVideoView = (row) => {
  videoLiveRef.value.dialogVisible = true
  currentDetail.value = { ...row }
}
const videoPlaybakRef = ref()
const handleVideoPlayback = (row) => {
  videoPlaybakRef.value.dialogVisible = true
  currentDetail.value = { ...row }
}

onMounted(() => {
  initTableList(1)
})
</script>

<template>
  <div class="search search1" :class="{ active: toggleSearchStatus }">
    <div class="search-left" ref="searchFromRef">
      <!-- <el-form class="search-form" inline>
        <el-form-item label="关键词">
          <el-input
            class="search-input"
            v-model="searchParams.keywords"
            placeholder="请输入设备名称、编码、位置、型号"
            :suffix-icon="Search"
          ></el-input>
        </el-form-item>
      </el-form>
      <a
        class="search-left-toggle"
        v-if="showToggle"
        @click="handleToggleSearch"
      >
        <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
        {{ toggleSearchStatus ? '收起' : '展开' }}
      </a> -->
    </div>
    <div class="search-right">
      <el-button type="primary" @click="initTableList(1)"
        ><svg-icon name="search" size="14px" />搜索</el-button
      >
      <el-button @click="handleReset(null)"
        ><svg-icon name="reset" size="17px" />重置</el-button
      >
    </div>
  </div>
  <div class="content">
    <div class="content-operate">
      <el-button type="primary" @click="handleAdd('设备新增')"
        ><svg-icon name="add" size="15px" />新增设备</el-button
      >
    </div>
    <div class="content-table">
      <el-table
        class="custom-table"
        :data="tableData"
        show-overflow-tooltip
        :tooltip-options="{ showAfter: 300 }"
      >
        <el-table-column type="index" label="序号" width="60px" />
        <el-table-column prop="nickName" label="设备名称" />
        <el-table-column prop="ip" label="ip地址" />
        <el-table-column prop="port" label="端口" />
        <el-table-column prop="serialNumber" label="序列号" />
        <el-table-column prop="model" label="设备型号" />
        <el-table-column label="操作" fixed="right" width="240px">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleEdit(scope.row, '设备编辑')"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              @click="handleDetail(scope.row, '设备详情')"
              >详情</el-button
            >
            <el-button link type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
            <!-- <el-button link type="primary" @click="handleVideoView(scope.row)"
              >实时视频</el-button
            > -->
            <el-button
              link
              type="primary"
              @click="handleVideoPlayback(scope.row)"
              >视频回放</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="content-page">
      <el-pagination
        class="custom-pagination"
        :current-page="paginationParams.pageIndex"
        :page-size="paginationParams.pageSize"
        background
        :page-sizes="[10, 20, 30, 50]"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="initTableList"
      />
    </div>
  </div>

  <StorageAdd
    ref="addRef"
    :detail="currentDetail"
    :park-list="parkList"
    @close="handleAddDialogClose"
  />
  <StorageDetail
    ref="detailRef"
    :detail="currentDetail"
    :park-list="parkList"
  />
  <!-- <VideoLiveDialog
    ref="videoLiveRef"
    :detail="currentDetail"
    @close="handleClose"
  /> -->
  <VideoPlaybakDialog
    ref="videoPlaybakRef"
    :detail="currentDetail"
    @close="handleClose"
  />
</template>
